<template>
  <div id="stationInfo">
    <div class="oneStationInfo" v-if="stationInfoShow">
      <div class="oneStationInfoDetail">
        <div class="oneStationInfoDetailBackground">
          <div class="diamondRight">
            <div class="quadrilateral"></div>
            <div class="diamond"></div>
          </div>
          <div class="quadrilateral"></div>
          <div class="diamondLeft">
            <div class="quadrilateral"></div>
            <div class="diamond"></div>
          </div>
          <div class="borderLeft" style="height: 220px;position: absolute;z-index: 250;top:0;left:0;"></div>
          <div class="borderTop" style="width: 380px;position: absolute;z-index: 250;top:0;left:0;"></div>
          <div class="borderRight" style="height: 220px;position: absolute;z-index: 250;top:20px;right:0;"></div>
          <div class="borderBottom" style="width: 380px;position: absolute;z-index: 250;bottom:0;right:0;"></div>
          <div class="frameBorderTop"></div>
          <div class="frameBorderBottom"></div>
        </div>
        <div class="oneStationInfoDetailContent">
          <Row style="padding:0 0 5px 0;border-bottom:1px solid rgba(142,233,255,0.30);">
            <i-col span="20">
              <span style="font-size: 20px;" :style="stationColor">{{currentStationInfo.dataStation.stationName}}</span>
              <span style="font-size: 12px;color: #457387;margin-left: 5px;">「 {{currentStationInfo.dataStation.free}} 」</span>
            </i-col>
            <i-col span="4" style="text-align: right;cursor:pointer;" @click.native="stationInfoClose">
              <Icon type="close-round" size="20" color="#69A3C6" style="margin-top: 5px;"></Icon>
            </i-col>
          </Row>
          <Row class="infoDetailRowBackfround">
            <i-col>整车</i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="10">发送量</i-col>
            <i-col span="14">
              {{getStationDataDayList.zcSendNum}}吨
            </i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="10">到达量</i-col>
            <i-col span="14">{{getStationDataDayList.zcArriveNum}}吨</i-col>
          </Row>

          <Row class="infoDetailRowBackfround">
            <i-col>集装箱</i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="10">发送量</i-col>
            <i-col span="7">{{getStationDataDayList.xcSendCount}}箱</i-col>
            <i-col span="7">{{getStationDataDayList.xcSendNum}}吨</i-col>
          </Row>
          <Row class="infoDetailRow">
            <i-col span="10">到达量</i-col>
            <i-col span="7">{{getStationDataDayList.xcArriveCount}}箱</i-col>
            <i-col span="7">{{getStationDataDayList.xcArriveNum}}吨</i-col>
          </Row>
          <Row class="infoDetailRow" style="margin-top: 5px;">
            <i-col span="10">主要发送品类</i-col>
            <i-col span="14" style="overflow: hidden;">{{currentStationInfo.transBizType.substring(0,14)}}</i-col>
          </Row>

          <Row class="infoDetailRow">
            <i-col span="10">主要货物去向</i-col>
            <i-col span="14" style="">{{currentStationInfo.keyPointDzmtDz.substring(0,14)}}</i-col>
          </Row>
          <Row style="margin: 2px 0;">
            <i-col span="24" style="text-align: right;font-size: 12px;color: #5CA7FF;cursor:pointer;"><span @click="showStationInfoDetail">详情&nbsp;></span></i-col>
          </Row>
        </div>
      </div>
      <div class="oneStationInfoWaybill">
        <div class="selectButton" v-if="showWayBillListSelectButton">
          <Row v-if="wayBillListSelect==='day'?false:true" @click.native="changeBillListStartTime('day')">
            <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">日</i-col>
          </Row>
          <Row v-if="wayBillListSelect==='month'?false:true" @click.native="changeBillListStartTime('month')">
            <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">月</i-col>
          </Row>
          <Row v-if="wayBillListSelect==='year'?false:true" @click.native="changeBillListStartTime('year')">
            <i-col style="font-size: 12px;color: #66B7F2;padding: 4px 0;text-align: center;cursor:pointer;">年</i-col>
          </Row>
        </div>
        <div class="title">
          <div class="titleBackground">
            <div class="diamond">
              <div class="diamondLeft">
                <div class="diamondLeftTop"></div>
              </div>
              <div class="diamondCenter"></div>
              <div class="diamondRight">
                <div class="diamondRightTop"></div>
              </div>
            </div>
            <div class="quadrilateral"></div>
          </div>
          <div class="titleContent">
            <Row>
              <i-col span="18" style="text-align: center;font-size: 14px;color: #FFFFFF;padding-top: 6px;">公铁转运总量</i-col>
              <i-col span="6" style="font-size: 12px;color: #66B7F2;padding-top: 8px;cursor:pointer;" @click.native="showWayBillListSelectButton=true">
                <span v-if="wayBillListSelect==='day'?true:false">日</span>
                <span v-if="wayBillListSelect==='month'?true:false">月</span>
                <span v-if="wayBillListSelect==='year'?true:false">年</span>
                <Icon type="arrow-down-b"></Icon>
              </i-col>
            </Row>
          </div>
        </div>
        <div class="titleCount">
          <Row style="">
            <i-col style="text-align: center;font-size: 26px;padding-top: 3px;" :style="stationColor" v-if="+currentBillList.cnt>0">
              {{((+currentBillList.cnt)/10000)>=1?((+currentBillList.cnt)/10000).toFixed(floatNum)+' 万':+(currentBillList.cnt)}}<span style="font-size: 12px;">单</span>
            </i-col>
            <i-col style="text-align: center;font-size: 26px;padding-top: 3px;" :style="stationColor" v-if="!(+currentBillList.cnt>0)">
              0<span style="font-size: 12px;">单</span>
            </i-col>
          </Row>
        </div>
        <div class="wayBillList">
          <div class="wayBillListRow" v-for="item in currentBillList.billList">
            <Row v-if="item.trainNumber">
              <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">车号：{{item.trainNumber?item.trainNumber:''}}</i-col>
            </Row>
            <Row v-if="item.truckCode">
              <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">箱号：{{item.truckCode?item.truckCode:''}}</i-col>
            </Row>
            <Row v-if="item.time">
              <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">时间：{{item.time?item.time:''}}</i-col>
            </Row>
            <Row v-if="item.truckNo">
              <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">车号：{{item.truckNo?item.truckNo:''}}</i-col>
            </Row>
            <Row v-if="item.containerNo">
              <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">箱号：{{item.containerNo?item.containerNo:''}}</i-col>
            </Row>
            <Row v-if="item.inOut">
              <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">状态：{{item.inOut?item.inOut:''}}</i-col>
            </Row>
            <Row v-if="item.getTime">
              <i-col style="font-size: 12px;color: #FFFFFF;line-height: 20px;">时间：{{item.getTime?item.getTime:''}}</i-col>
            </Row>
          </div>
          <div class="noBillListResult" v-if="!(+currentBillList.cnt>0)">
            <Row>
              <i-col span="8">
                <i class="noBillListResultImg"></i>
              </i-col>
              <i-col span="16" style="font-size: 14px;color: #5AE2FF;">
                !暂无相关数据
              </i-col>
            </Row>
          </div>
        </div>
        <div class="bottomShadow">
        </div>
      </div>
      <div class="productShow">
        <div class="productShowBackground">
          <div class="quadrilateral"></div>
          <div class="diamond">
            <div class="diamondLeft">
              <div class="diamondLeftBottom"></div>
            </div>
            <div class="diamondRight"></div>
          </div>
        </div>
        <div class="productShowInfo">
          <Row style="padding: 5px 0 10px 0;border-bottom: 1px solid #225D92;">
            <i-col span="12" class="titleStyle">
              {{currentStationInfo.dataStation.stationName}}站品类占比
            </i-col>
            <i-col span="12" style="text-align: right;">
              <ButtonGroup>
                <Button type="primary" style="cursor:pointer;" size="small" :class="productListSelect==='day'?'buttonGroupActive':''" @click.native="changeProductStartTime('day')">日</Button>
                <Button type="primary" style="cursor:pointer;" size="small" :class="productListSelect==='month'?'buttonGroupActive':''" @click.native="changeProductStartTime('month')">月</Button>
                <Button type="primary" style="cursor:pointer;" size="small" :class="productListSelect==='year'?'buttonGroupActive':''" @click.native="changeProductStartTime('year')">年</Button>
              </ButtonGroup>
            </i-col>
          </Row>
          <div id="myChartPie" style="width:100%;height: 180px;text-align: center" v-if="!noProductResult"></div>
          <Row style="margin-top: 20px;" v-if="noProductResult">
            <i-col span="8">
              <i class="noBillListResultImg"></i>
            </i-col>
            <i-col span="16" style="font-size: 14px;color: #5AE2FF;">
              !暂无相关数据
            </i-col>
          </Row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getStationPm, freightCenterDataLight} from '@api/lightStation/station'
  import echarts from 'echarts'
  import _ from 'lodash'
  import moment from 'moment'

  export default {
    name: 'stationInfo',
    data () {
      let floatNum = 2
      let stationColor = {
        color: ''
      }
      let endTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 23:59:59'
      let dayStartTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 00:00:00'
      let monthStartTime = moment().subtract(1, 'days').month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00'
      let yearStartTime = moment().subtract(1, 'days').year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00'
      let getStationDataDayList = {}
      let tableParam = {
        startTime: dayStartTime,
        endTime: endTime
      }
      let stationBillDay = {}
      let stationBillMonth = {}
      let stationBillYear = {}
      let showWayBillListSelectButton = false
      let wayBillListSelect = 'day'
      let productListSelect = 'day'
      let currentBillList = {}
      let noProductResult = false
      let stationInfoShow = true
      let datas = {
        floatNum,
        stationInfoShow,
        noProductResult,
        productListSelect,
        currentBillList,
        showWayBillListSelectButton,
        wayBillListSelect,
        stationColor,
        endTime,
        dayStartTime,
        monthStartTime,
        tableParam,
        yearStartTime,
        getStationDataDayList,
        stationBillDay,
        stationBillMonth,
        stationBillYear
      }
      return datas
    },
    props: {
      currentStationInfo: {
        type: Object,
        default () {
          return {}
        }
      },
      billList: {
        type: Object,
        default () {
          return {}
        }
      },
      color: {
        type: String,
        default: ''
      }
    },
    methods: {
      showStationInfoDetail () {
        this.$emit('showStationInfoDetail')
      },
      stationInfoClose () {
        this.$emit('closeInfo')
      },
      changeProductStartTime (startTime) {
        this.productListSelect = startTime
        if (startTime === 'day') {
          this.tableParam.startTime = this.dayStartTime
        } else if (startTime === 'month') {
          this.tableParam.startTime = this.monthStartTime
        } else if (startTime === 'year') {
          this.tableParam.startTime = this.yearStartTime
        }
        this.drawPie()
      },
      changeBillListStartTime (startTime) {
        this.wayBillListSelect = startTime
        this.showWayBillListSelectButton = false
        if (startTime === 'day') {
          this.currentBillList = this.stationBillDay
        } else if (startTime === 'month') {
          this.currentBillList = this.stationBillMonth
        } else if (startTime === 'year') {
          this.currentBillList = this.stationBillYear
        }
      },
      getStationDataDay () {
        let paramDay = {
          startTime: this.dayStartTime,
          endTime: this.endTime,
          centerName: this.currentStationInfo.dataStation.free,
          stationName: this.currentStationInfo.dataStation.stationCode
        }
        freightCenterDataLight(paramDay).then(res => {
          if (res.data.isSuccess === 1) {
            let getStationDataDayList = {}
            _.forEach(res.data.data, (item, key) => {
              getStationDataDayList.xcSendNum = ((+item.xcSendNum) / 10000) >= 100 ? (+item.xcSendNum / 10000).toFixed(this.floatNum) + '万' : +item.xcSendNum
              getStationDataDayList.xcArriveNum = ((+item.xcArriveNum) / 10000) >= 100 ? (+item.xcArriveNum / 10000).toFixed(this.floatNum) + '万' : +item.xcArriveNum
              getStationDataDayList.xcArriveCount = ((+item.xcArriveCount) / 10000) >= 100 ? (+item.xcArriveCount / 10000).toFixed(this.floatNum) + '万' : +item.xcArriveCount
              getStationDataDayList.zcSendNum = ((+item.zcSendNum) / 10000) >= 100 ? (+item.zcSendNum / 10000).toFixed(this.floatNum) + '万' : +item.zcSendNum
              getStationDataDayList.xcSendCount = ((+item.xcSendCount) / 10000) >= 100 ? (+item.xcSendCount / 10000).toFixed(this.floatNum) + '万' : +item.xcSendCount
              getStationDataDayList.zcArriveNum = ((+item.zcArriveNum) / 10000) >= 100 ? (+item.zcArriveNum / 10000).toFixed(this.floatNum) + '万' : +item.zcArriveNum
            })
            this.getStationDataDayList = getStationDataDayList
          }
        })
      },
      drawPie () {
        this.noProductResult = false
        let param = {startTime: this.tableParam.startTime, endTime: this.tableParam.endTime, stationCode: this.currentStationInfo.dataStation.stationCode}
        getStationPm(param).then(res => {
          if (res.data.isSuccess === 1) {
            if (res.data.data && res.data.data.length > 0) {
              let mydata = []
              _.forEach(res.data.data, (item) => {
                if (item.pmCount > 0) {
                  mydata.push({value: item.pmCount, name: item.pm})
                }
              })
              let theme = 'light'
              let myChartPie = echarts.init(document.getElementById('myChartPie'), theme)
              let option = {
                tooltip: {
                  trigger: 'item',
                  name: '货物品类占比',
                  formatter: '货物品类占比 <br/>{b} : {c} ({d}%)'
                },
                series: [
                  {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    data: mydata,
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
              if (option && typeof option === 'object') {
                myChartPie.setOption(option, true)
              }
            } else {
              this.noProductResult = true
            }
          }
        })
      },
      loadStationInfo () {
        this.drawPie()
        this.getStationDataDay()
      }
    },
    mounted () {
      this.stationColor.color = this.color
      this.loadStationInfo()
    },
    computed: {
      // 'currentStationInfo': function () {
      //   console.log(this.currentStationInfo)
      // },
      // 'color': function () {
      //   console.log(this.color)
      // }
    },
    watch: {
      'currentStationInfo': {
        handler: function (oldVal, newVal) {
          this.tableParam.startTime = this.dayStartTime
          this.wayBillListSelect = 'day'
          this.productListSelect = 'day'
          this.loadStationInfo()
          this.changeBillListStartTime('day')
        },
        deep: true
      },
      'color': {
        handler: function (oldVal, newVal) {
          this.stationColor.color = this.color
        },
        deep: true
      },
      'billList': {
        handler: function (oldVal, newVal) {
          this.stationBillDay = this.billList.stationBillDay
          this.stationBillMonth = this.billList.stationBillMonth
          this.stationBillYear = this.billList.stationBillYear
          this.currentBillList = this.billList.stationBillDay
        },
        deep: true
      }
    },
    components: {}
  }
</script>

<style>
  /*单个站点弹出框*/
  #stationInfo .oneStationInfo {
    position: absolute;
    top: 150px;
    left: 50%;
    z-index: 200;
    margin-left: -435px;
    width: 870px;
    height: 240px;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail {
    width: 400px;
    height: 240px;
    position: absolute;
    left: 0;
    top: 0;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground {
    width: 400px;
    height: 240px;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight {
    width: 400px;
    height: 20px;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight .diamond {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 210;
    border-bottom: 20px solid #43657C;
    border-right: 20px solid transparent;
    height: 0;
    width: 400px;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondRight .quadrilateral {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 220;
    width: 380px;
    height: 20px;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .quadrilateral {
    width: 400px;
    height: 200px;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft {
    width: 400px;
    height: 20px;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft .diamond {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 210;
    border-top: 20px solid #203546;
    border-left: 20px solid transparent;
    height: 0;
    width: 400px;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .diamondLeft .quadrilateral {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 220;
    width: 380px;
    height: 20px;
    background-image: linear-gradient(-90deg, rgba(67, 101, 124, 1), rgba(32, 53, 70, 1));
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .frameBorderTop {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 300;
    width: 30px;
    height: 30px;
    background: url("../../../../../static/img/img_ydangle.png") no-repeat;
    background-size: cover;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailBackground .frameBorderBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 300;
    width: 30px;
    height: 30px;
    background: url("../../../../../static/img/img_zdangle.png") no-repeat;
    background-size: cover;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent {
    width: 360px;
    height: 200px;
    margin: 10px 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 400;
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent .infoDetailRow {
    padding: 2px 0;
    font-size: 12px;
    color: #FFFFFF;
    background-image: linear-gradient(90deg, rgba(27, 47, 67, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);
  }

  #stationInfo .oneStationInfo .oneStationInfoDetail .oneStationInfoDetailContent .infoDetailRowBackfround {
    padding: 2px 0;
    font-size: 11px;
    color: #5FBBFB;
  }

  /*边框*/
  #stationInfo .borderTop {
    border-top-width: 1px;
    border-top-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  #stationInfo .borderLeft {
    border-left-width: 1px;
    border-left-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(41, 227, 248, 1), rgba(46, 206, 236, 1), rgba(16, 75, 113, 1)) 1 1;
  }

  #stationInfo .borderRight {
    border-right-width: 1px;
    border-right-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  #stationInfo .borderBottom {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-image: -webkit-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: -moz-linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
    border-image: linear-gradient(90deg, rgba(16, 75, 113, 1), rgba(30, 91, 136, 1), rgba(59, 136, 205, 1)) 1 1;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill {
    width: 160px;
    height: 252px;
    position: absolute;
    left: 410px;
    top: 0;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .selectButton {
    position: absolute;
    top: 30px;
    right: 22px;
    background: #083049;
    width: 25px;
    height: 50px;
    z-index: 500;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title {
    width: 160px;
    height: 28px;
    position: relative;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title .titleBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 28px;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond {
    width: 160px;
    height: 14px;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondLeft {
    position: absolute;
    left: 0;
    top: 0;
    border-bottom: 14px solid #4285C1;
    border-left: 14px solid transparent;
    height: 0;
    width: 14px;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondLeft .diamondLeftTop {
    position: absolute;
    z-index: 210;
    top: 1px;
    left: -13px;
    border-bottom: 13px solid #083049;
    border-left: 13px solid transparent;
    height: 0;
    width: 13px;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondRight {
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 14px solid #4285C1;
    border-right: 14px solid transparent;
    height: 0;
    width: 14px;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondRight .diamondRightTop {
    position: absolute;
    z-index: 210;
    top: 1px;
    left: 0;
    border-bottom: 13px solid #083049;
    border-right: 13px solid transparent;
    height: 0;
    width: 13px;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title .titleBackground .diamond .diamondCenter {
    position: absolute;
    top: 0;
    left: 13px;
    width: 133px;
    height: 14px;
    background: #083049;
    border-top: 1px solid #4285C1;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .title .titleBackground .quadrilateral {
    width: 160px;
    height: 14px;
    background: #083049;
    border-left: 1px solid #4285C1;
    border-right: 1px solid #4285C1;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .titleContent {
    position: absolute;
    z-index: 300;
    top: 0;
    left: 0;
    width: 160px;
    height: 28px;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .titleCount {
    width: 160px;
    height: 44px;
    border: 1px solid #4285C1;
    border-top: none;
    background-image: linear-gradient(90deg, rgba(21, 63, 91, 1), rgba(26, 58, 83, 1));
    box-shadow: 0 0 10px 0 rgba(0, 98, 212, 0.37);
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .wayBillList {
    height: 180px;
    width: 160px;
    padding: 0 10px;
    background-image: linear-gradient(-180deg, #22445D 89%, #08304A 94%);
    border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-image: -webkit-linear-gradient(180deg, rgba(66, 133, 193, 1), rgba(8, 48, 74, 1)) 1 1;
    border-image: -moz-linear-gradient(180deg, rgba(66, 133, 193, 1), rgba(8, 48, 74, 1)) 1 1;
    border-image: linear-gradient(180deg, rgba(66, 133, 193, 1), rgba(8, 48, 74, 1)) 1 1;
    border-top: none;
    border-bottom: none;
    overflow: hidden;
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .wayBillList .wayBillListRow {
    width: 100%;
    height: auto;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(142, 233, 255, 0.30);
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .wayBillList .noBillListResult {
    width: 100%;
    height: auto;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(142, 233, 255, 0.30);
  }

  #stationInfo .oneStationInfo .oneStationInfoWaybill .wayBillList .noBillListResult .noBillListResultImg {
    display: block;
    width: 37px;
    height: 25px;
    background: url("../../../../../static/img/noResult.png") no-repeat;
    background-size: cover;
  }

  #stationInfo .productShowInfo .noBillListResultImg {
    display: block;
    width: 37px;
    height: 25px;
    float: right;
    margin-right: 5px;
    background: url("../../../../../static/img/noResult.png") no-repeat;
    background-size: cover;
  }

  #stationInfo .oneStationInfo .productShow {
    width: 290px;
    height: 240px;
    position: absolute;
    right: 0;
    top: 0;
  }

  #stationInfo .oneStationInfo .productShowBackground {
    width: 290px;
    height: 240px;
    position: absolute;
    right: 0;
    top: 0;
  }

  #stationInfo .oneStationInfo .productShowBackground .quadrilateral {
    width: 290px;
    height: 220px;
    background: #083049;
    border-left: 1px solid #4285C1;
    border-right: 1px solid #4285C1;
    border-top: 1px solid #4285C1;
  }

  #stationInfo .oneStationInfo .productShowBackground .diamond {
    width: 290px;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  #stationInfo .oneStationInfo .productShowBackground .diamond .diamondLeft {
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 20px solid #4285C1;
    border-left: 20px solid transparent;
    height: 0;
    width: 20px;
  }

  #stationInfo .oneStationInfo .productShowBackground .diamond .diamondLeft .diamondLeftBottom {
    position: absolute;
    z-index: 210;
    bottom: 0;
    left: -19px;
    border-top: 20px solid #083049;
    border-left: 20px solid transparent;
    height: 0;
    width: 19px;
  }

  #stationInfo .oneStationInfo .productShowBackground .diamond .diamondRight {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 20px;
    width: 270px;
    background: #083049;
    border-right: 1px solid #4285C1;
    border-bottom: 1px solid #4285C1;
  }

  #stationInfo .oneStationInfo .productShowInfo {
    width: 270px;
    height: 220px;
    margin: 10px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 400;
  }

  #stationInfo .oneStationInfo .productShowInfo .titleStyle {
    text-align: left;
    font-size: 14px;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(226, 251, 255, 1)), to(rgba(107, 194, 255, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #stationInfo .ivu-btn-primary {
    color: #66B7F2;
    background-color: #225D92;
    border: 2px solid #225D92;
  }

  #stationInfo .buttonGroupActive {
    background-color: #173A58;
    border: 2px solid #225D92;
  }
</style>
